<template>
  <module
    ref="module"
    class="property-charges"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :barLineConfigBottom="barLineConfigBottom"
    :gaugeTop="gaugeTop"></module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'staffAttendance',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '员工考勤',
        goPageUrl: '/home/attendance'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '2', // 第一层显示内容
        bottomType: '1' // 第二层显示内容
      },
      gaugeTop: {
        title: {
          text: '今日全勤率'
        },
        angle: '',
        radius: '75%'
      }, // 本月满意率
      barLineConfigBottom: {
        title: {
          text: '今日考勤'
        },
        axis: {
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: ['全勤人数', '请假人数', '迟到人数', '早退人数', '迟到且早退']
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#2e92cb']
        },
        seriesData: []
      },
      attendanceInformation: {},
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        // 物业收费
        this.staffApi.getDayCheckingInfo({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.attendanceInformation = data
            this.gaugeTop.angle = data.normalRate.indexOf('%') > -1 ? data.normalRate.replace('%', '') : 0
          } else {
            this.attendanceInformation = {}
            this.gaugeTop.angle = 0
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.attendanceInformation = {}
          this.gaugeTop.angle = 0
          this.$parent.showTips('请求失败，点击确认继续刷新')
          if (!isRefresh) {
            this.handleData()
          }
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.attendanceInformation
      let seriesData = []
      if (JSON.stringify(data) !== '{}') {
        seriesData = [parseInt(data.normalCount), parseInt(data.askLeaveCount),
          parseInt(data.lateCount), parseInt(data.leaveCount),
          parseInt(data.lateLeaveCount)]
      }
      this.barLineConfigBottom.seriesData = [{
        data: seriesData,
        name: '',
        colorIndex: 0,
        isBar: true
      }]
    },
    resizeChart () {
      this.$refs.module.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.staffAttendanceTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.staffAttendanceTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.staffAttendanceTimer)
  }
}
</script>
<style lang="scss" scoped>
.property-charges {
  .module-content {
    width: 100%;
    height: 100%;
  }
  & /deep/ .module {
    padding-top: 0;
  }
}
</style>
